<template>
	<view>
		<view class="title">{{thisIndex+1}}、{{thisLIist.qname}}</view>
		<view class="box" @click="clickItem(1)" v-if="thisLIist.option1">
			<view class="box_l" :class="selectIndex==0?'box_select':''">A</view>
			<view class="box_text">{{thisLIist.option1}}</view>
		</view>
		<view class="box" @click="clickItem(2)" v-if="thisLIist.option2">
			<view class="box_l" :class="selectIndex==1?'box_select':''">B</view>
			<view class="box_text">{{thisLIist.option2}}</view>
		</view>
		<view class="box" @click="clickItem(3)" v-if="thisLIist.option3">
			<view class="box_l" :class="selectIndex==2?'box_select':''">C</view>
			<view class="box_text">{{thisLIist.option3}}</view>
		</view>
		<view class="box" @click="clickItem(4)" v-if="thisLIist.option4">
			<view class="box_l" :class="selectIndex==3?'box_select':''">D</view>
			<view class="box_text">{{thisLIist.option4}}</view>
		</view>
		<view class="boxes">本题为单选题·{{thisIndex+1}}/{{list.length}}</view>
		
		<examResul v-if="showPopup" :userInfo="userInfo" :answerid="answerid" :total="total" @click="hidePopup"></examResul>

	</view>
</template>

<script>
	import examResul from 'components/examResult';
	import { requestData } from 'util/request';
	export default {
		components: {
			examResul
		},
		data() {
			return {
				list: [],
				thisLIist: [], //当前答题数据
				selectIndex: null, //选中
				thisIndex: 0, //当前答题下标
				answerid: '', //当前答题id
				clickTrue: true,
				showPopup: false,
				total: 0, //分数
				userInfo: '',
			};
		},
		
		onLoad() {
			let that = this
			
			// 考题列表
			requestData('/qu/banklist').then(res=>{
				that.list = res.data
				that.thisLIist = res.data[0]
			})
			
			// 考题列表
			// uni.request({
			// 	url: getApp().globalData.url + '/qu/banklist',
			// 	method: 'POST',
			// 	header: {
			// 		'content-type': 'application/x-www-form-urlencoded',
			// 		token: uni.getStorageSync('token')
			// 	},
			// 	success(res) {
			// 		if(res.data.code==20000){
			// 			that.list = res.data.data
			// 			that.thisLIist = res.data.data[0]
			// 		}else{
			// 			uni.showToast({
			// 				title: res.data.msg,
			// 				icon: 'none'
			// 			})
			// 		}
					
			// 	}
			// })
		},
		
		
		
		methods: {
			// 点击答案
			clickItem(i){
				let that = this
				
				if(that.clickTrue){
					that.clickTrue = false
					let answer = ''
					that.selectIndex = i - 1
					switch (i){
						case 1:
							answer = 'option1##'
						break;
						case 2:
							answer = 'option2##'
						break;
						case 3:
							answer = 'option3##'
						break;
						case 4:
							answer = 'option4##'
						break;
					}
					uni.request({
						url: getApp().globalData.url + '/qu/onesure',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							token: uni.getStorageSync('token')
						},
						data: {
							bankid: that.thisLIist.bankid,
							answer: answer,
							isfirst: that.thisIndex==0?1:0,
							answerid: that.answerid,
							itemno: that.thisIndex + 1
						},
						success(res) {
							if(res.data.code == 20000){
								that.answerid = res.data.answerid
								if(that.thisIndex + 1 == that.list.length){
									that.endExam()
									return
								}
								setTimeout(()=>{
									that.thisIndex = that.thisIndex + 1
									that.thisLIist = that.list[that.thisIndex]
									that.clickTrue = true
									that.selectIndex = null
								},500)
							}else{
								that.clickTrue = true
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						}
					})
				}
			},
			
			// 答题结束
			endExam(){
				let that = this
				
				uni.request({
					url: getApp().globalData.url + '/qu/exam',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						token: uni.getStorageSync('token')
					},
					data: {
						answerid: that.answerid
					},
					success(res) {
						uni.request({
							url: getApp().globalData.url + '/sys/getuser',
							method: 'POST',
							header: {
								'content-type': 'application/x-www-form-urlencoded',
								token: uni.getStorageSync('token')
							},
							success(res) {
								that.userInfo = res.data.data
							}
						})
						that.showPopup = true
						that.total = res.data.data.total
						
					}
				})
			},
			
			// 关闭弹窗
			hidePopup(){
				this.showPopup = false
				uni.switchTab({
					url: '/pages/exam/exam'
				})
			},
		},
	}
</script>

<style lang="scss">
	page{
		background: #ECECEC;
	}
	.title{
		margin-top: 10rpx;
		padding: 64rpx 40rpx;
		width: 670rpx;
		min-height: 60rpx;
		background: #03AEA5;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #FFFFFF;
		line-height: 60rpx;
		overflow: hidden;
	}
	.box{
		margin-top: 10rpx;
		width: 750rpx;
		// height: 136rpx;
		background: #FFFFFF;
		overflow: hidden;
		
		&_l{
			float: left;
			margin: 42rpx 31rpx 42rpx 41rpx;
			width: 52rpx;
			height: 52rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(103,103,103,0.88);
			border-radius: 50%;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 40rpx;
			color: #000000;
			line-height: 50rpx;
			overflow: hidden;
		}
		&_select{
			background: #03AEA5;
			color: #FFFFFF;
		}
		&_text{
			float: left;
			margin-top: 44rpx;
			margin-bottom: 44rpx;
			width: 600rpx;
			min-height: 48rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 40rpx;
			color: #000000;
			line-height: 48rpx;
		}
	}
	.boxes{
		margin-top: 10rpx;
		width: 750rpx;
		height: 136rpx;
		background: #03AEA5;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #FFFFFF;
		line-height: 136rpx;
		letter-spacing: 2rpx;
	}
</style>
